<!-- <template>
         
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
      <router-link to="/HContractTrace">货主合同跟踪管理</router-link>
   </el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/TContractTrace">承运合同跟踪管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>定义路线</el-breadcrumb-item>
 </el-breadcrumb></div>
  <el-row :gutter="20">
    <el-col :span="8">
      <div style="">
<span>起点：</span><input v-model="address.startaddr" @blur="convertToLatLng('startaddr')" placeholder="输入起始地名" /><br/>
<el-icon @click="swapPoints" style="width: 1em; height: 1em;size: 20px;"><Refresh /></el-icon><br/>
         <span>终点：</span>   <input v-model="address.endaddr" @blur="convertToLatLng('endaddr')" placeholder="输入结束地名" />
         <div>
  
  </div>
  <div>
    <button @click="showAllRoutes">推荐路线</button>&nbsp;&nbsp;
    <button @click="leastDistance">最短距离</button>&nbsp;&nbsp;
    <button @click="leastTime">避开高速</button>&nbsp;&nbsp;
      <button  :waypoints="3" @click="AddLine"> 确定路线 </button>
  </div>
      </div>
      
    </el-col>
    <el-col :span="16">
        <baidu-map class="bm-view" :zoom="20" style="overflow:auto" :center="{ lng: 116.404, lat: 39.915 }" :scroll-wheel-zoom="true">
    <bm-driving :start="lushuPoint.start" :end="lushuPoint.end" :auto-viewport="true" :policy="policy" :panel="true" location="北京" :waypoints="waypoints">
    </bm-driving>
  </baidu-map>
    </el-col>
  </el-row>

  

</template> -->
<template>
  <div>
    <!-- 面包屑 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link to="/HContractTrace">货主合同跟踪管理</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link to="/TContractTrace">承运合同跟踪管理</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>定义路线</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
 
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="address-input-container">
          <div>
            <span>起点：</span>
            <input
              v-model="address.startaddr"
              @blur="convertToLatLng('startaddr')"
              placeholder="输入起始地名"
              class="input-field"
            />
          </div>
       
          <el-icon @click="swapPoints" class="swap-icon">
             <SortDown />
             <SortUp />
          </el-icon>
          <div>
            <span>终点：</span>   
            <input
              v-model="address.endaddr"
              @blur="convertToLatLng('endaddr')"
              placeholder="输入结束地名"
              class="input-field"
            />
          </div>
          <div class="button-group">
            <button @click="showAllRoutes">推荐路线</button>
            <button @click="leastDistance">最短距离</button>
            <button @click="leastTime">避开高速</button>
            <button :waypoints="3" @click="AddLine">确定路线</button>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <baidu-map class="bm-view" :zoom="20" :center="{ lng: 116.404, lat: 39.915 }" :scroll-wheel-zoom="true">
          <bm-driving
            :start="lushuPoint.start"
            :end="lushuPoint.end"
            :auto-viewport="true"
            :policy="policy"
            :panel="true"
            location="北京"
            :waypoints="waypoints"
          ></bm-driving>
        </baidu-map>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { useGeocoder } from 'vue-baidu-map-3x';
import BMap from 'vue-baidu-map-3x'
import { useRoute } from 'vue-router';
const route = useRoute();
const address = ref({
  startaddr: route.query.startingCounty || '',
  endaddr: route.query.endCounty || ''
});

const lushuPoint = ref({
  start: { lng: null, lat: null },
  end: { lng: null, lat: null }
});

const policy = ref('');
const waypoints = ref([]); // 用于存储途经点
const swapPoints = () => {
  // 交换起点和终点的位置
  const temp = lushuPoint.value.start;
  lushuPoint.value.start = lushuPoint.value.end;
  lushuPoint.value.end = temp;
  const tempAddr = address.value.startaddr;
  address.value.startaddr = address.value.endaddr;
 address.value.endaddr = tempAddr;
  // 重新规划路线
  replanRoute();
};
//图标
import {
  Refresh,
  HelpFilled,
  Switch,
  Check,
  SortDown,
 SortUp
} from '@element-plus/icons-vue'
// 转换地址到经纬度
const convertToLatLng = (type) => {
  return useGeocoder().then(geocoder => {
    const addr = type === 'startaddr' ? address.value.startaddr : address.value.endaddr;
    return geocoder.getPoint(addr, res => {
      if (type === 'startaddr') {
        lushuPoint.value.start = res;
       
      } else {
        lushuPoint.value.end = res;
       
      }
        console.log(lushuPoint.value.start)
        console.log(lushuPoint.value.end) 
        
      replanRoute(); // 地址转换完成后重新规划路线
       getDrivingRoute(); // 地址转换完成后获取驾车路线信息
    });
  });
};

// 重新规划路线
const replanRoute = () => {
  if (lushuPoint.value.start && lushuPoint.value.end) {
    // 这里可以添加逻辑来处理途经点（如果有的话）
    // 例如：waypoints.value = [...]; // 设置途经点
    // 由于您的示例中没有处理途经点的逻辑，这里我们暂时不使用它们
    // 直接使用当前的起点、终点和策略来重新渲染路线
  }
};

// 显示所有路线（这个可能需要您自定义逻辑，因为百度地图API可能没有直接提供“全部路线”的功能）
const showAllRoutes = () => {
  // 这里可以是一个占位函数，或者您可以实现一个自定义的逻辑来显示多条路线
  // 例如，通过调用百度地图API的多次规划来获取不同的路线，并在页面上以某种方式展示它们
  // 注意：这可能需要额外的UI设计和逻辑处理
    alert('最短时间路线');
policy.value = 'BMAP_DRIVING_POLICY_LEAST_TIME'; // 设置为推荐路线（通常是最短时间）
  replanRoute();
   getDrivingRoute(); // 地址转换完成后获取驾车路线信息
  console.log(policy.value)
};



// 最短距离和避开高速的点击事件处理函数
const leastDistance = () => {
  policy.value = "BMAP_DRIVING_POLICY_LEAST_DISTANCE";
  replanRoute();
  console.log(policy.value)
};
const leastTime = () => {
  policy.value = "BMAP_DRIVING_POLICY_AVOID_HIGHWAYS";
  replanRoute();
  console.log(policy.value)
};
//添加定义路线
import  { ElMessage} from 'element-plus'
const AddLine = () => {
  // 获取起点和终点的经纬度
  const start = lushuPoint.value.start;
  const end = lushuPoint.value.end;
  const ss = policy.value;
  console.log(start.lat)
      console.log(end.lat)
  console.log(ss)
  axios.post("/hwrite/api/Contract/UpdateLineCon?ContractId="+route.query.id+"&line="+ss+"&longitude="+start.lat+","+start.lng+"&latitude="+end.lat+","+end.lng).then(res => {
    if (res.data.code==0) {
      ElMessage.success('保存路线成功');  
     console.log(res.data.data)
    }
    else {
      ElMessage.error('保存失败');
    }
    
    
  })


}
// 组件挂载时尝试解析地址
onMounted(() => {
  convertToLatLng('startaddr');
  convertToLatLng('endaddr');
});
</script>

<style>
.bm-view {
    width: 900px;
    height: 500px;
}
</style>
<style scoped>
.breadcrumb-container {
  margin-bottom: 30px;
}
 
.address-input-container {
  margin-bottom: 20px;
}
 
.input-field {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
 
.swap-icon {
  cursor: pointer;
  margin-left: 10px;
  margin-right: 10px;
  width: 2em;
  height: 2em;
}
 
.button-group {
  margin-top: 10px;
}
 
.button-group button {
  margin-right: 10px;
}
 
.bm-view {
  height: 400px; /* 或者您需要的任何高度 */
  border: 1px solid #ddd; /* 可选：为地图添加边框 */
}
</style>


